<template>
  <div class="shop-list">
    <div class="shop-list-header">
      <div class="shop-list-title">
        店铺信息
      </div>
      <ElButton type="primary" v-if="auth.has('add')" plain @click="onAddShop">添加店铺</ElButton>
    </div>

    <div>
      <ShopItem v-for="(item, index) in modelValue" :key="item" :data="item" @edit="onEdit(item, index)" />
      <ElEmpty v-if="!modelValue.length" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { addShopDialog, editShopDialog } from '../dialog/shopDialog'
import ShopItem from './ShopItem.vue'
import { getUserInfo } from '../api'
import { useAuth } from '@/utils/auth'

const auth = useAuth()

interface Props {
  modelValue: any[];
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  data: () => ({})
})

interface Emits {
  'update:model-value': [any[]]
}

const emit = defineEmits<Readonly<Emits>>()

onMounted(() => {

})

const onAddShop = async () => {
  if (props.data.zxid) {
    console.log(props.data);
    const data: any = await addShopDialog.open({ row: { zxid: props.data.zxid } });
    if (data.ywdjrUserId) {
      const userInfo = await getUserInfo({ userId: data.ywdjrUserId });
      data.ywdjrName = userInfo.flowerName;
    }
    const val = [...props.modelValue];
    val.push(data);
    emit('update:model-value', val);
  } else {
    ElMessage.warning('请先选择咨询记录！')
  }
}

const onEdit = async (row, index) => {
  console.log(row);
  // 传店铺1的ID
  const data: any = await editShopDialog.open({ row });
  if (data.ywdjrUserId) {
    const userInfo = await getUserInfo({ userId: data.ywdjrUserId });
    data.ywdjrName = userInfo.flowerName;
  }
  const val = [...props.modelValue]
  val.splice(index, 1, data)
  emit('update:model-value', val)
}

</script>

<style scoped lang="scss">
.shop-list {
  box-sizing: border-box;
  margin: 0 -14px;
  width: calc(100% + 28px);
  padding: 0 14px;

  &-header {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-title {
    height: 44px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 13px;
    color: #757575;

    &::before {
      box-sizing: border-box;
      content: '';
      display: inline-block;
      width: 7px;
      height: 10px;
      border: 2.4px solid #3778FB;
      border-radius: 2px;
      margin-right: 5px;
    }
  }
}
</style>